<template>
<!-- 
  title课程名称
  userId自己id
  toUserId对方id
  教师ID  23  44  146
  学生ID  136 141
-->
   <div class="sds">
    <!-- <div class="box">
      <p>该生在学课程：【钢琴启蒙系列课】</p>
      <p>朗朗大师直播课</p>
    </div> -->
    <div class="content">
      <div v-for="item in messageLsit" :key="item.ID" >
          <div v-if="item.ID" class="leftb" :key="item.ID">
            <img src="../assets/1.jpg" alt="" class="tx">
            <div class="lcontent-main">
              <p>{{item.payload.text}}</p>
            </div>
          </div>
          <div  v-else class="rightb">
              <img :src="userInfo.avatar" alt="" class="tx">
              <div class="rcontent-main">
                <p>{{item.message}}</p>
              </div>
            </div>
      </div>
      
      <!-- 语音条 -->
      <!-- <div class="rightb">
        <img :src="userInfo.avatar" alt="" class="tx">
        <div class="rcontent-main-time">
          <div class="time"><img src="../assets/2.png" alt="" style="width:0.3rem;height:0.5rem;"></div>
        </div>
        <span>6s</span>
      </div> -->
    </div>

    <div class="foot">
       <!-- <img src="../assets/voice.png" alt=""> -->
       <div v-html="message" @blur="message=$event.target.innerText" contenteditable="true" class="textarea"></div>
       <!-- <img src="../assets/more.svg" alt=""> -->
       <div class="send" @click="send">发送</div>
    </div>
   </div>
</template>

<style lang="stylus" scoped >
.send {
  width: .8rem;
  height:.6rem;
  line-height:.6rem;
  border-radius: .1rem;
  margin-bottom:.1rem;
  text-align: center;
  color:#fff;
  box-shadow: border;
  border:1px solid #fff;
  
}
.box{
    width:9.2rem;
    height:1.48rem;
    margin:0.5rem auto;
    background :#fff;
    padding-top:0.4rem;
    margin-top:.5rem;
}
.box p{
    font-size: 0.37rem;
    line-height :0.56rem;
    font-family: PingFang SC;
    font-weight: 600;
    color: #000000;
    margin-left:0.5rem;
    
}
.content{
    margin:0 auto;
    width:9.2rem;
    height:20rem;
    overflow :hidden;
}
.content .leftb{
  float:left;
  width 9rem;
  margin-bottom:0.5rem;
}
.content .rightb{
  float:right;
  width:9rem;
  margin-bottom:0.5rem;
  
}
.content .leftb img.tx{
  width:0.84rem;
  height:0.83rem;
  float:left;
  margin-right:0.2rem;
}

.content .lcontent-main{
  float:left;
  max-width:6rem;
  padding:0.3rem 0.6rem;
  background:#fff;
}
.content .lcontent-main p{
  font-size: 0.35rem;
  line-height :0.6rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
.content .rightb img.tx{
  width:0.84rem;
  height:0.83rem;
  float:right;
  margin-left:0.2rem;
  border-radius:100px;
  overflow:hidden;
}
.content .rcontent-main{
  float:right;
  max-width :6rem;
  padding:0.3rem 0.6rem;
  background:#fff;
}
.content .rcontent-main p{
  font-size: 0.35rem;
  line-height :0.6rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
.content .rcontent-main-time{
  float:right;
  width:3rem;
  max-width :6rem;
  padding:0.2rem 0.6rem;
  background:#fff;
  text-align:right;
}
.content span{
  float:right;
  font-size: 0.35rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
  opacity: 0.46;
  margin:0.3rem 0.2rem;
}
.foot{
  width:10rem;
  // height:1.4rem;
  background :#FF6422;
  position:fixed;
  bottom:0;
  display:flex;
  align-items:flex-end;
  justify-content :space-between;
  padding:.3rem 0.4rem;
  box-sizing :border-box;
}
.foot .textarea{
  // width:7.28rem;
  flex:1;
  box-sizing :border-box;
  margin:0 .32rem;
  min-height:0.8rem;
  max-height :2rem;
  background :#fff;
  overflow-y:auto;
  border:none;
  border-radius :.2rem;
  outline:none;
  border :none;
  padding:0.2rem .4rem;
  word-break:break-all;
  // word-wrap:break-word;//英文不折行 
  font-size: .5rem;
}
.foot img{
  width:0.64rem;
  height:0.64rem;
  border-radius:100px;
  overflow:hidden;
  margin-bottom:0.1rem;
  // display: inline-block
  font-size:0;
  vertical-align :bottom;
  }
</style>
<script>
// import tabbar from '@/components/tabbar'
import { request ,WXshowToast} from '../../utils/index';
import { Api } from '../../config/api.js';
export default {
  name: "index",
  components: {
  },
  data() {
    return {
      local:'',//当前环境域名
     message:'',
     messagemaxlength:6541,//限制文本输入框最大文字数量
     messageLsit:[],
     userId:'',
     userSig:'',
     userInfo:'',//自己的用户信息
     toUserId:'',//对方的userid
     toUserSig:'',
     toUserInfo:'',//对方的用户信息

      // bannerlist:''//轮播图数据
    };
  },
  watch:{
    'message'(){//单次文本最大字符长度限制为6541位
      if(this.message.length>5){
        console.log(this.message.length)
        this.message = this.message.substring(0,this.messagemaxlength);//6541是仿微信的最大字符长度
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  async  created(){
    let that =this
    that.local = process.env.VUE_APP_URL
    console.log('当前环境对应域名',process.env.NODE_ENV)
    // console.log('接收参数',this.$route.query)
    let {token,userId,toUserId,title} = that.$route.query
    document.title = title//浏览器标题
    if(token&&userId){// 获取userid  usersig
      this.$cookies.set("token",token,"1d");  // 24天后过期
      this.$cookies.set("userId",userId,"1d");  // 24天后过期
    }
    // that.getuserinfo(userId)//获取自己信息
    // that.getuserinfo(toUserId)//获取对方信息

// let data=await this.$jsonp(Api.getuserId, {//作为备用JSONP跨域方式
//     userId,
//     token
// })

    let userInfo =await request({
       url:Api.getUserSig,
       params:{
　　    userId,
        token
      },
       method: 'GET'
     })
     that.userId = userInfo.userId
     that.userSig = userInfo.userSig
     that.userInfo = userInfo
      console.log('tim',this.TIM)
    
    let toUserInfo =await request({//
       url:Api.getUserSig,
       params:{
　　    userId:toUserId,
        token
      },
       method: 'GET'
     })
     console.log('toUserInfo',toUserInfo.userId)
     that.toUserId = toUserInfo.userId
     that.toUserSig = toUserInfo.userSig
     that.toUserInfo = toUserInfo

     this.tim.login({userID: this.userId, userSig: this.userSig}).then(function(imResponse) {
        console.log('登录成功',imResponse.data); // 登录成功
      }).catch(function(imError) {
        console.warn('login error:', imError); // 登录失败的相关信息
      });
      console.log('TIM',this.TIM)
      
      this.tim.on(this.TIM.EVENT.SDK_READY, function(event) {
        console.log('[ event ]', event)
        that.tim.on(that.TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived);
          // 收到离线消息和会话列表同步完毕通知，接入侧可以调用 sendMessage 等需要鉴权的接口
          // self.hlData()
        });
      
      let onMessageReceived = function(event) {
        console.log('[ 接收消息 ]', event)
        event.data.forEach(element => {
          that.messageLsit.push(element)//接收到的数据赋值给聊天记录数组
        });
        
        console.log('[ that.messageLsit ]', that.messageLsit)
      // event.data - 存储 Message 对象的数组 - [Message]
      };
      
      
      // this.tim.getConversationList().then(function(imResponse) {//会话列表
	    //   var conversationList = imResponse.data.conversationList; // 会话列表，用该列表覆盖原有的会话列表
      //   console.log('会话列表',conversationList)
      //   //会话列表信息解析处理，请求后台接口获取对应聊天人信息

      // }).catch(function(imError) {
      //   console.warn('getConversationList error:', imError); // 获取会话列表失败的相关信息
      // });
  },
  methods: {
    getuserinfo(e){

    },
    send(){//发送消息
    
      let that = this
      
      console.log('[ that.toUserId ]', that.toUserId)
      let message = that.tim.createTextMessage({//创建消息
        to:that.toUserId+'',//消息接收方的userID或groupID
        conversationType:that.TIM.TYPES.CONV_C2C,//绘画类型  TIM.TYPES.CONV_C2C为端到端类型
        payload:{//消息内容的容器
          text:that.message
        }
      })
      that.tim.sendMessage(message).then(function(imResponse) {//发送消息
        console.log('发送消息成功',imResponse.data); // 登录成功
        that.messageLsit.push({
          userId:that.userId,
          message:that.message
        })
        console.log('发送消息',that.messageLsit)
        
        // that.messageLsit = 

      }).catch(function(imError) {
        console.warn('发送消息失败:', imError); // 登录失败的相关信息
      });
      that.message = ''
    }
  },
  destroyed() {
    // 离开页面退出当前账号
    // let promise = this.tim.logout();
    // promise
    //   .then(function (imResponse) {
    //     console.log(imResponse.data);
    //   })
    //   .catch(function (imError) {
    //     console.warn("logout error:", imError);
    //   });
  },
};
</script>
